<template>
  <section>
   
   

 

    <!--编辑界面-->
    
    <!-- 抽屉界面 -->
    <el-drawer
        title="数据字典明细"
        :visible.sync="table"
        direction="rtl"
        size="50%">
      <el-table :data="gridData" highlight-current-row v-loading="listDetailLoading" @selection-change="selsChange" style="width: 100%;">

        <!--这是elementui提供的选择框，此选择框可以多选-->
        <el-table-column type="selection" width="55">
        </el-table-column>

        <el-table-column type="index" width="60">
        </el-table-column>
        <el-table-column prop="name" label="明细名" width="120" >
        </el-table-column>

        <el-table-column label="操作" width="150">
          <!--新增-->
          <template slot="header" slot-scope="scope">
            <el-button size="small" @click="handleDetailedit(scope.$index, scope.row)">新增</el-button>
          </template>
          <template scope="scope">
            <el-button size="small" @click="handledetaileDetailAdd(scope.$index, scope.row)">编辑</el-button>
            <el-button type="danger" size="small" @click="handleDetailDel(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!--工具条-->
      <el-col :span="24" class="toolbar">
        <!--
          disabled：是否不可点击
            true：不可点击
            false：可点击
        -->
        <el-button type="danger" @click="batchDetailRemove" :disabled="this.sels.length===0">批量删除</el-button>
        <el-pagination
            layout="total, sizes, prev, pager, next"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-size="pageSize"
            :total="total"
            style="float:right;">
        </el-pagination>
      </el-col>
      <!--明细表编辑界面-->
      <el-dialog title="编辑" :visible.sync="editFormDetailVisibleDetail" :close-on-click-modal="false">
        <el-form :model="editFormDetail" label-width="80px" :rules="editFormDetailRules" ref="editFormDetail">
          <el-form-item label="明细名" prop="name">
            <el-input v-model="editFormDetail.name" auto-complete="off"></el-input>
          </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click.native="editFormDetailVisibleDetail = false">取消</el-button>
          <el-button type="primary" @click.native="editSDetailubmit" :loading="editDetailLoading">提交</el-button>
        </div>
      </el-dialog>
    </el-drawer>
  </section>

</template>

<script>
import util from '../../common/js/util'
//import NProgress from 'nprogress'
import { getDetailListPage, removeDetail, batchDetailRemoveDetail, editDetail, addDetail } from '../../api/api';

export default {
  data() {
    return {
      gridData:[],
      table: false,
      filters: {
        keyword: ''
      },
      title:"",
      details: [],
      total: 0,
      pageSize:5,
      currentPage:1,



      listDetailLoading: false,
      sels: [],//列表选中列

      editFormDetailVisibleDetail: false,//编辑界面是否显示
      editDetailLoading: false,
      editFormDetailRules: {
        name: [
          {required: true, message: '请输入明细名', trigger: 'blur'}
        ],
        
      },
      //编辑界面数据
      editFormDetail: {
        id: null,
        name: '',
      },
      cities: []
    }
  },
  methods: {
    search(){
      this.currentPage=1;
      this.getDetails();
    }
    ,
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getDetails();
    },


    // 明细开始
    //获取明细列表
    getDetails() {
      let para = {
        pageSize:this.pageSize,
        currentPage:this.currentPage,
        keyword: this.filters.keyword
      };
      this.listLoading = true; // 忙等
      /*发送Axios*/
      this.$http.post("/detail",para)

          .then(result=>{
            // 关闭忙等
            this.listLoading = false;
            // 1.给列表模型层对象赋值
            this.details = result.data.rows;
            // 2.给total赋值
            this.total = result.data.total;
          })
          .catch(result=>{
            this.$message({
              message: '系统繁忙，请重试！',
              type: 'error'
            });

          })
    },
    //删除
    handleDetailDel: function (index, row) {
      this.$confirm('确认删除该记录吗?', '提示', {
        type: 'warning'
      }).then(() => {
        this.listLoading = true;
        // 发送Axios请求
        this.$http.delete("/detail/"+row.id)
            .then(result=>{
              // 1.关闭忙等框
              this.listLoading = false;
              // 2.判断删除是否成功
              if (result.data.success){
                // 删除成功
                // 1.给出成功提示
                this.$message({
                  message: result.data.message,
                  type: 'success'
                });
              }else {
                // 删除失败
                // 删除成功
                // 1.给出失败提示
                this.$message({
                  message: result.data.message,
                  type: 'error'
                });

              }
              // 2.修改页码为第一页
              this.currentPage = 1;
              // 3.调用函数刷新列表
              this.getDetails();
            })
            .catch(result=>{
              // 1.关闭忙等框
              this.listLoading = false;
              // 2.给出自定义失败提示！
              this.$message({
                message: '系统繁忙，请重试！',
                type: 'error'
              });
            })
      }).catch(() => {

      });
    },


    //显示明细表编辑界面
    handleDetailedit: function (index, row) {
      // 在此编辑为编辑
      this.title ="编辑";
      // 弹出编辑模态框
      this.detaileditFormVisible = true;
      // 2.克隆对象到我们模型层的对象中
      this.detaileditForm = Object.assign({}, row);

    },
    //显示明细表新增界面
    handleDetailAdd: function () {
      this.title = "新增";
      this.detaileditFormVisible = true;
      this.detaileditForm = {
        id: null,
        name: '',


      };
    },



    // 明细表编辑
    editDetailSubmit: function () {
      this.$refs.detaileditForm.validate((valid) => {
        if (valid) {
          this.$confirm('确认提交吗？', '提示', {}).then(() => {
            this.editLoading = true;
            //NProgress.start();
            let para = Object.assign({}, this.detaileditForm);

            // 发送Axios请求
            this.$http.put("/detail", para)
                .then(result=>{
                  // 关闭忙等
                  this.editLoading = false;
                  // 2.关闭弹出框
                  this.detaileditFormVisible = false;
                  // 判断是否成功
                  if(result.data.success){
                    this.$message({
                      message: result.data.message,
                      type: 'success'
                    });
                  } else {
                    this.$message({
                      message: result.data.message,
                      type: 'error'
                    });
                  }
                  this.currentPage = 1;
                  this.getDetails();
                })
                .catch(result=>{
                  this.editLoading = false;
                  this.$message({
                    message: '系统繁忙，请重试！',
                    type: 'error'
                  });
                })
          });
        }
      });
    },

    // 明细结束
    selsChange: function (sels) {
      this.sels = sels;
    },
    //批量删除
    batchDetailRemove: function () {
      var ids = this.sels.map(item => item.id);
      this.$confirm('确认删除选中记录吗？', '提示', {
        type: 'warning'
      }).then(() => {
        this.listDetailLoading = true;
        // 发送Axios请求
        this.$http.patch("/detail",ids)
            .then(result=>{
              // 1.关闭忙等框
              this.listDetailLoading = false;
              // 2.判断删除是否成功
              if (result.data.success){
                // 删除成功
                // 1.给出成功提示
                this.$message({
                  message: result.data.message,
                  type: 'success'
                });
              }else {
                // 删除失败
                // 删除成功
                // 1.给出失败提示
                this.$message({
                  message: result.data.message,
                  type: 'error'
                });
              }
              // 2.修改页码为第一页
              this.currentPage = 1;
              // 3.调用函数刷新列表
              this.getDetails();
            })
            .catch(result=>{
              // 1.关闭忙等框
              this.listDetailLoading = false;
              // 2.给出自定义失败提示！
              this.$message({
                message: '系统繁忙，请重试！',
                type: 'error'
              });
            })
      }).catch(() => {

      });
    }
  },
  mounted() {
    this.getDetails();

  }
}

</script>

<style scoped>

</style>